<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
    />
    <title>江南大学马克思主义学院 - 党建工作数字化平台(V2.0.0)</title>
    <link
      href="../static/css/bootstrap.min.css"
      th:href="@{/css/bootstrap.min.css}"
      rel="stylesheet"
    />
    <link
      href="../static/css/font-awesome.min.css"
      th:href="@{/css/font-awesome.min.css}"
      rel="stylesheet"
    />
    <link
      href="../static/css/style.min.css"
      th:href="@{/css/style.min.css}"
      rel="stylesheet"
    />
    <link
      href="../static/css/login.min.css"
      th:href="@{/css/login.min.css}"
      rel="stylesheet"
    />
    <link
      href="../static/css/skins-red.css"
      th:href="@{/css/skins-red.css}"
      rel="stylesheet"
    />
    <link
      href="../static/ruoyi/css/ry-ui.css"
      th:href="@{/ruoyi/css/ry-ui.css?v=4.8.1}"
      rel="stylesheet"
    />
    <!-- 360浏览器急速模式 -->
    <meta name="renderer" content="webkit" />
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link
      rel="shortcut icon"
      href="../static/favicon.ico"
      th:href="@{favicon.ico}"
    />
    <style>
      /* 全局样式 */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        min-height: 100vh;
        background-color: #f8f9fa;
        font-family: "Microsoft YaHei", sans-serif;
        overflow-x: hidden;
      }

      /* 背景装饰 */
      .bg-decoration {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        overflow: hidden;
      }

      .bg-decoration::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 40%;
        background: linear-gradient(135deg, #c91f37 0%, #880e4f 100%);
        transform: skewY(-5deg);
        transform-origin: top left;
      }

      .bg-decoration::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60%;
        background-color: #f8f9fa;
      }

      /* 登录容器 */
      .login-container {
        position: relative;
        z-index: 10;
        max-width: 1000px;
        margin: 80px auto;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        border-radius: 10px;
        overflow: hidden;
      }

      /* 左侧党建宣传区 */
      .party-info {
        background: linear-gradient(135deg, #c91f37 0%, #880e4f 100%);
        color: white;
        padding: 60px 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
      }

      .party-info::after {
        content: "";
        position: absolute;
        right: -30px;
        top: 50%;
        transform: translateY(-50%);
        width: 60px;
        height: 60px;
        background-color: #f8f9fa;
        border-radius: 50%;
        box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.1);
      }

      .party-logo {
        font-size: 80px;
        margin-bottom: 30px;
        text-align: center;
        text-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
        animation: pulse 3s infinite;
      }
      .custom-icon {
        display: inline-block;
        width: 100px;
        height: 100px;
        /*background-image: url('/static/img/mayuan.png');*/
        background-size: cover;
      }

      .party-slogan {
        font-size: 24px;
        margin-bottom: 20px;
        font-weight: 500;
        text-align: center;
      }

      .party-desc {
        font-size: 16px;
        line-height: 1.8;
        opacity: 0.9;
      }

      /* 右侧登录表单区 */
      .login-form {
        background-color: white;
        padding: 60px 50px;
      }

      .login-title {
        font-size: 28px;
        color: #c91f37;
        margin-bottom: 40px;
        text-align: center;
        font-weight: 600;
      }

      .form-group {
        margin-bottom: 25px;
        position: relative;
      }

      .form-group label {
        display: block;
        margin-bottom: 8px;
        color: #333;
        font-weight: 500;
      }

      .form-control {
        width: 100%;
        padding: 12px 15px;
        border: 1px solid #ddd;
        border-radius: 5px;
        font-size: 16px;
        transition: all 0.3s ease;
      }

      .form-control:focus {
        border-color: #c91f37;
        box-shadow: 0 0 0 3px rgba(201, 31, 55, 0.1);
        outline: none;
      }

      .input-icon {
        position: absolute;
        right: 15px;
        top: 45px;
        color: #999;
      }

      .captcha-group {
        display: flex;
        gap: 15px;
      }

      .captcha-img {
        width: 130px;
        height: 48px;
        background-color: #f1f1f1;
        border-radius: 5px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #666;
        font-weight: bold;
        letter-spacing: 3px;
        user-select: none;
      }

      .remember-group {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
      }

      .remember-me {
        display: flex;
        align-items: center;
        gap: 5px;
        color: #666;
      }

      .forgot-password {
        color: #c91f37;
        text-decoration: none;
        transition: color 0.3s ease;
      }

      .forgot-password:hover {
        color: #880e4f;
        text-decoration: underline;
      }

      .login-btn {
        width: 100%;
        padding: 12px;
        background-color: #c91f37;
        color: white;
        border: none;
        border-radius: 5px;
        font-size: 18px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
      }

      .login-btn:hover {
        background-color: #a81a2e;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(201, 31, 55, 0.2);
      }

      .login-btn:active {
        transform: translateY(0);
      }

      .footer-text {
        text-align: center;
        margin-top: 30px;
        color: #666;
        font-size: 14px;
      }

      /* 动画效果 */
      @keyframes pulse {
        0% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.05);
        }
        100% {
          transform: scale(1);
        }
      }

      /* 响应式设计 */
      @media (max-width: 768px) {
        .login-container {
          margin: 30px 20px;
        }

        .party-info {
          padding: 40px 30px;
          text-align: center;
        }

        .party-info::after {
          display: none;
        }

        .login-form {
          padding: 40px 30px;
        }

        .captcha-group {
          flex-direction: column;
        }

        .captcha-img {
          width: 100%;
        }
      }
    </style>
    <script>
      if (window.top !== window.self) {
        alert("未登录或登录超时。请重新登录");
        window.top.location = window.location;
      }
    </script>
  </head>
  <body>
    <!-- 背景装饰 -->
    <div class="bg-decoration"></div>

    <!-- 登录容器 -->
    <div class="login-container">
      <div class="row">
        <!-- 左侧党建宣传区 -->
        <div class="col-md-6 d-none d-md-block">
          <div class="party-info">
            <div class="party-logo">
              <i
                class="custom-icon"
                th:style="'background-image: url(' + @{/img/mayuan.png} + ');'"
              ></i>
            </div>
            <h2 class="party-slogan">不忘初心 牢记使命</h2>
            <p class="party-desc">
              坚持和加强党的全面领导，坚持党要管党、全面从严治党，以加强党的长期执政能力建设、先进性和纯洁性建设为主线，以党的政治建设为统领，以坚定理想信念宗旨为根基，以调动全党积极性、主动性、创造性为着力点。
            </p>
            <p class="party-desc mt-4">
              全面推进党的政治建设、思想建设、组织建设、作风建设、纪律建设，把制度建设贯穿其中，深入推进反腐败斗争，不断提高党的建设质量。
            </p>
          </div>
        </div>

        <!-- 右侧登录表单区 -->
        <div class="col-md-6">
          <div class="login-form">
            <h3 class="login-title">智慧党建平台系统</h3>

            <form id="signupForm">
              <div class="form-group">
                <label for="username">用户名</label>
                <input
                  type="text"
                  name="username"
                  value="admin"
                  id="username"
                  class="form-control"
                  placeholder="请输入用户名"
                  required
                />
                <i class="fa fa-user input-icon"></i>
              </div>

              <div class="form-group">
                <label for="password">密码</label>
                <input
                  type="password"
                  name="password"
                  value="admin123"
                  id="password"
                  class="form-control"
                  placeholder="请输入密码"
                  required
                />
                <i class="fa fa-lock input-icon"></i>
              </div>

              <div class="form-group" th:if="${captchaEnabled==true}">
                <label for="captcha">验证码</label>
                <div class="captcha-group">
                  <input
                    type="text"
                    name="validateCode"
                    class="form-control code"
                    placeholder="验证码"
                    maxlength="5"
                  />
                  <a href="javascript:void(0);" title="点击更换验证码">
                    <img
                      th:src="@{/captcha/captchaImage(type=${captchaType})}"
                      class="imgcode"
                      width="85%"
                    />
                  </a>
                </div>
              </div>

              <div class="remember-group">
                <label class="remember-me">
                  <input type="checkbox" /> 记住我
                </label>
                <a href="#" class="forgot-password">忘记密码?</a>
              </div>

              <button
                type="submit"
                id="btnSubmit"
                class="login-btn"
                data-loading="正在验证登录，请稍候..."
              >
                登录
              </button>

              <p class="footer-text">© 2023 智慧党建平台系统 版权所有</p>
            </form>
          </div>
        </div>
      </div>
    </div>

    <script th:inline="javascript">
      var ctx = [[@{/}]]; var captchaType = [[${captchaType}]]; var captchaEnabled = [[${captchaEnabled}]];
    </script>
    <!--[if lte IE 8
      ]><script>
        window.location.href = ctx + "html/ie.html";
      </script><!
    [endif]-->
    <!-- 全局js -->
    <script
      src="../static/js/jquery.min.js"
      th:src="@{/js/jquery.min.js}"
    ></script>
    <script
      src="../static/ajax/libs/validate/jquery.validate.min.js"
      th:src="@{/ajax/libs/validate/jquery.validate.min.js}"
    ></script>
    <script
      src="../static/ajax/libs/layer/layer.min.js"
      th:src="@{/ajax/libs/layer/layer.min.js}"
    ></script>
    <script
      src="../static/ajax/libs/blockUI/jquery.blockUI.js"
      th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"
    ></script>
    <script
      src="../static/ruoyi/js/ry-ui.js"
      th:src="@{/ruoyi/js/ry-ui.js?v=4.8.1}"
    ></script>
    <script src="../static/ruoyi/login.js" th:src="@{/ruoyi/login.js}"></script>
    <script>
      // 验证码刷新功能
      document
        .querySelector(".captcha-img")
        .addEventListener("click", function () {
          this.src = "path/to/your/captcha.png?" + Math.random();
        });
    </script>
  </body>
</html>
